import { getWrokingHoursDetailsByPage, addWrokingHoursDetails, updateWrokingHoursDetails, delWrokingHoursDetails, exportWrokingHoursDetails } from '@/services/product/wrokingHoursDetails';
import { PlusOutlined } from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Button, Form, Input, message, Modal, Tree } from 'antd';
import { sortTran, filterTran } from '@/utils/requestUtil';
import React, { useEffect, useRef, useState } from 'react';
import { ModalForm, ProFormText } from '@ant-design/pro-components';
const WrokingHoursDetails: React.FC<{}> = () => {
const actionRef = useRef<ActionType>();
  const [modalVisit, setModalVisit] = useState(false); // 新建和编辑提示框
  const [confirmLoading, setConfirmLoading] = useState(false); //编辑框的disable
  const [formTitle, setFormTitle] = useState('新建'); //
  const [createOrUpdate, setCreateOrUpdate] = useState(false); //编辑框的disable
  const [form] = Form.useForm();
    const ref = useRef(null);
  const columns: ProColumns[] = [
        {
        title: '序号',
        dataIndex: 'index',
        valueType: 'index',
        width: 80,
        },
        {
          title: '本次计时开始时间',
          dataIndex: 'currDay',
        },
        {
          title: '本次记录日期',
          dataIndex: 'currEndTime',
        },
        {
          title: '本次计时开始时间',
          dataIndex: 'currStartTime',
        },
        {
          title: '本次累计工时',
          dataIndex: 'currWorkHours',
        },
        {
          title: '操作人',
          dataIndex: 'operatorId',
        },
        {
          title: '工序ID',
          dataIndex: 'processId',
        },
        {
          title: '计时开关',
          dataIndex: 'timeFlag',
        },
        {
        title: '创建日期', //表头显示的名称
        search: false,
        dataIndex: 'createTime',
        },
        {
        title: '创建人', //表头显示的名称
        search: false,
        dataIndex: 'createName',
        },
        {
        title: '操作',
        valueType: 'option',
        key: 'option',
        fixed: 'right',
        render: (text, record, _, action) => [
        <a
                key="editKey"
                onClick={() => {

        setModalVisit(true);
        setCreateOrUpdate(true);
        setFormTitle('编辑');
        form.setFieldsValue({
        currDay: record.currDay,
        currEndTime: record.currEndTime,
        currStartTime: record.currStartTime,
        currWorkHours: record.currWorkHours,
        operatorId: record.operatorId,
        processId: record.processId,
        timeFlag: record.timeFlag,
        id: record.id,
        });
        }}
        >
        编辑
        </a>,
        <a
                key="deleteKey"
                onClick={() => {


        Modal.confirm({
        title: '删除',
        content: '确定要删除吗',
        okText: '确认',
        cancelText: '取消',
        onOk: async () => {
        await delWrokingHoursDetails({ id: record.id });
        actionRef.current.reload();
        },
        });

        }}
        >
        删除
        </a>,
        ],
        },
  ];
  const handleSubmit = async (values) => {
        setConfirmLoading(true);
        if (formTitle == '新建') {
          const result = await addWrokingHoursDetails(values);
        if (result != null) {
          message.success('添加成功');
        }
        } else {
          await updateWrokingHoursDetails(values);
        }
        setConfirmLoading(false);
        setModalVisit(false);
        actionRef.current.reload();
  };

  return (
  <PageHeaderWrapper title={false} breadcrumb={undefined}>
    <ProTable
        headerTitle="xx查询"
        actionRef={actionRef} //用于触发刷新操作等，看api
        rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
        formRef={ref}
        toolBarRender={(action, { selectedRows }) => [
              <Button
                key="button"
                icon={<PlusOutlined />}
                onClick={() => {
                    setCreateOrUpdate(false);
                    setFormTitle('新建');
                    form.resetFields();
                    setModalVisit(true);
                }}
                type="primary"
                >
                新建
                </Button>,
                <Button
                        key="button"
                        icon={<PlusOutlined />}
                onClick={() => {
                const filters = filterTran(ref.current.getFieldsValue());
                exportWrokingHoursDetails({
                    current: 1,
                    pageSize: 5000,
                    filters: filters,
                }).then((res) => {
                const aLink = document.createElement('a');
                document.body.appendChild(aLink);
                aLink.style.display = 'none';
                aLink.href = window.URL.createObjectURL(res);
                aLink.setAttribute('download', `WrokingHoursDetails.xlsx`);
                aLink.click();
                document.body.removeChild(aLink);
                });
                }}
                type="primary"
                >
                导出
                </Button>,
        ]}
        request={async (params = {}, sort, filter) => {

                const sorters = sortTran(sort);
                const filters = filterTran(params);
                const result = await getWrokingHoursDetailsByPage({ ...params, sorters: sorters, filters: filters });
                return {
                data: result.data.content,
                total: result.data.totalElements,
                success: result.success,
                };

        }}
        columns={columns}
        scroll={{ x: 2000, y: 350 }}
        rowSelection={{}}
    />

    <ModalForm
        visible={modalVisit}
        title={formTitle}
        form={form}
        onFinish={handleSubmit}
        modalProps={{
        destroyOnClose: true,
        onCancel: () => {
            setModalVisit(false);
        },
        }}
    >
        <ProFormText  name="id" label="id" placeholder="请输入名称" hidden={true} />
        <ProFormText  name="currDay" label="本次计时开始时间"
                 rules={[{ required: true, message: 'Please input your currDay!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="currEndTime" label="本次记录日期"
                 rules={[{ required: true, message: 'Please input your currEndTime!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="currStartTime" label="本次计时开始时间"
                 rules={[{ required: true, message: 'Please input your currStartTime!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="currWorkHours" label="本次累计工时"
                 rules={[{ required: true, message: 'Please input your currWorkHours!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="operatorId" label="操作人"
                 rules={[{ required: true, message: 'Please input your operatorId!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="processId" label="工序ID"
                 rules={[{ required: true, message: 'Please input your processId!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="timeFlag" label="计时开关"
                 rules={[{ required: true, message: 'Please input your timeFlag!' }]}
        disabled={createOrUpdate}  />
    </ModalForm>
  </PageHeaderWrapper>
  );
  };
  export default WrokingHoursDetails;
